<template>
	<view style="border-top: 1px solid #e4e4e4">
		<view class="container">
			<view class="lbt">
				<u-swiper imgMode="aspectFit" keyName="image" circular showTitle height="680rpx" style="top: 0;"
					:list="list5" @change="e => current = e.current" :autoplay="true">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
				<u-gap bgColor="transparent" height="15"></u-gap>
			</view>
			<view style="display: flex; height: 30px;">
				<view style="display: flex; margin-left: 30rpx;">
					<view style="width: 80rpx; height: 50rpx; color: red;">
						<span style="font-size: 30rpx;">￥</span>
						<span style="font-size: 40rpx;">65</span>
					</view>
					<view style="margin-left:10rpx; color:#9a9da7;">
						<span style="line-height: 68rpx; font-size: 25rpx;">￥130</span>
						<span style="left: 142rpx; top: 758rpx; position: absolute;">——</span>
					</view>
				</view>
				<view style="margin:6rpx 0 0 310rpx ;">
					<view
						style="border-radius: 50rpx 0rpx 0rpx 50rpx; background-color: #4c77f7; width: 256rpx; height: 52rpx;">
						<span style="margin: 0 0 0 24rpx; font-size: 24rpx; color:#e4e4e4">分销得佣金：￥25</span>
					</view>
				</view>
			</view>
			<view style="margin: 30rpx 0 0 20rpx;">
				<span style="font-size: 36rpx">正版动漫周边桌面摆件猫咪手办橘猫手办</span>
			</view>
			<view style="margin-bottom: -16rpx; display: flex; height: 60rpx;">
				<view
					style="border-radius: 10%; display: flex; align-items: center; justify-content: center; margin: 16rpx 0 0 24rpx; border: 1rpx solid #c3c7d2; width: 64rpx; height: 30rpx;">
					<span style="font-size: 18rpx; color: #868891;">猫 咪</span></view>
				<view
					style="border-radius: 10%; display: flex; align-items: center; justify-content: center; margin: 16rpx 0 0 24rpx; border: 1rpx solid #c3c7d2; width: 64rpx; height: 30rpx;">
					<span style="font-size: 18rpx; color: #868891;">手 办</span></view>
				<view
					style="border-radius: 10%; display: flex; align-items: center; justify-content: center; margin: 16rpx 0 0 24rpx; border: 1rpx solid #c3c7d2; width: 64rpx; height: 30rpx;">
					<span style="font-size: 18rpx; color: #868891;">饰 品</span></view>
				<view
					style="border-radius: 10%; display: flex; align-items: center; justify-content: center; margin: 16rpx 0 0 24rpx; border: 1rpx solid #c3c7d2; width: 64rpx; height: 30rpx;">
					<span style="font-size: 18rpx; color: #868891;">周 边</span></view>
			</view>
		</view>
		<view style="background-color: #ebebeb; height: 20rpx;"></view>
		<view class="container1">
			<view style="margin-bottom: 10rpx; display: flex; height: 60rpx;">
				<span style="color: #868686; font-size: 26rpx; line-height: 60rpx; margin:0 18rpx 0;">领劵</span>
				<view
					style="border-radius: 6rpx; display: flex; align-items: center; justify-content: center; margin: 16rpx 0 0 24rpx; background-color: red; width: 160rpx; height: 35rpx;">
					<span style="font-size: 18rpx; color: #ffffff;">满88减10</span></view>
				<view
					style="border-radius: 6rpx; display: flex; align-items: center; justify-content: center; margin: 16rpx 0 0 24rpx; background-color: red; width: 160rpx; height: 35rpx;">
					<span style="font-size: 18rpx; color: #ffffff;">满150减20</span></view>
				<span style="color: #868686; font-size: 26rpx; line-height: 60rpx; margin-left:220rpx;">></span>
			</view>
			<view style="margin-bottom: 10rpx; display: flex; height: 60rpx;">
				<span style="color: #868686; font-size: 26rpx; line-height: 60rpx; margin:0 18rpx 0;">优惠</span>
				<span style="color: #33ff99; font-size: 26rpx; line-height: 60rpx; margin:0 18rpx 0;">快递</span>
				<span style="color: #868686; font-size: 26rpx; line-height: 60rpx; margin:0 18rpx 0;">江浙沪包邮</span>
				<span style="color: #868686; font-size: 26rpx; line-height: 60rpx; margin-left:332rpx;">></span>
			</view>
			<view style="margin-bottom: 10rpx; display: flex; height: 60rpx;">
				<span style="color: #33ff99; font-size: 26rpx; line-height: 60rpx; margin:0 18rpx 0 106rpx;">新店</span>
				<span style="color: #868686; font-size: 26rpx; line-height: 60rpx; margin:0 18rpx 0;">第二件享半价优惠</span>
			</view>
		</view>
		<view style="background-color: #ebebeb; height: 20rpx;"></view>
		<view class="container2">
			<view style="margin-bottom: 10rpx; display: flex; height: 60rpx;">
				<span style="color: #868686; font-size: 26rpx; line-height: 60rpx; margin:0 18rpx 0;">保障</span>
				<span style="color: #868686; font-size: 26rpx; line-height: 60rpx; margin-left:24rpx;">7天无理由退货 ·假一赔十</span>
			</view>
		</view>
		<view style="background-color: #ebebeb; height: 20rpx;"></view>
		<view class="container3">
			<view style="margin: 20rpx 0 25rpx; display: flex; height: 60rpx;">
				<span style="border-radius: 40rpx;  background-color: #507cff; height: 60rpx; width: 10rpx; margin-left:18rpx;"></span>
				<span style="color: #333333; font-size: 26rpx; line-height: 60rpx; margin-left:10rpx;">宝贝评价</span>
				<span style="color: #333333; font-size: 26rpx; line-height: 60rpx; margin:0 14rpx 0;">（16）</span>
				<span style="color: #868686; font-size: 26rpx; line-height: 60rpx; margin-left:312rpx;">查看全部 ></span>
			</view>
			<view style="margin: 25rpx 0 5rpx; display: flex; height: 60rpx;">
				<img :src="Image1" alt="" style="line-height: 60rpx; width: 50rpx; height: 50rpx; margin-left:18rpx;"/>
				<span style="color: #868686; font-size: 24rpx; line-height: 60rpx; margin-left:10rpx;">萌***奇</span>
			</view>
			<view style="margin: 5rpx 0 25rpx; display: flex; height: 60rpx;">
				<span style="color: #868686; font-size: 24rpx; line-height: 40rpx; margin-left:16rpx;">送朋友的，应该会喜欢^ ^</span>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				Image1: this.$minioServerUrl + 'static/fenxiao/u49.png',
				Image: this.$minioServerUrl + 'static/fenxiao/分销按钮2_u1576.png',
				list5: [{
					image: this.$minioServerUrl + '/static/fenxiao/u1530.png'
				}, {
					image: this.$minioServerUrl + '/static/fenxiao/u1531.png'
				}, {
					image: this.$minioServerUrl + '/static/fenxiao/u1532.png'
				}, {
					image: this.$minioServerUrl + '/static/fenxiao/u1533.png'
				}],
				current: 0,
			};
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.container {
		margin: 20rpx;
		height: 100%;
	}

	.container1 {
		margin: 10rpx 20rpx 10rpx 20rpx;
	}

	.container2 {
		margin: 10rpx 20rpx 10rpx 20rpx;
	}	
	.container3 {
		margin: 10rpx 20rpx 10rpx 20rpx;
	}
	
	
	.lbt {
		margin-top: 35rpx;

		.indicator {
			position: absolute;
			bottom: 0;
			left: 200rpx;
			@include flex(row);
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					background-color: #0055ff;
				}
			}
		}
	}
</style>